<template>
	<view class="right-view">
		<my-search class="search-box"  @click="gotoSearch"></my-search>
	</view>
	<view>
		<view class="assocition" v-for="(item,i) in associationList" :key="i">
			<navigator class="assocition-item" :url="'/subpkg/association/association?id=' +item.id">
				<view class="assocition-item-left">
					<image class="assocition-image" :src="this.baseUrl+item.associationImg" ></image>
				</view>
				<view class="assocition-item-right">
					<view class="association-name">{{item.associationName}}</view>
					<view class="association-introduce">{{item.associationIntroduction}}</view>
				</view>
			</navigator>
			<!-- 社团关注状态-->
			<view class="association-state">
				  <view class="association-state-true" v-if="item.followTableId">
					<view @click="concern(item.followTableId,item.id,i)">
						<!-- <uni-icons type="checkmarkempty" size="14" ></uni-icons> -->
						已关注
					</view>
				  </view>
				  <view class="association-state-false" v-else >
					<view   style="color : #ff7c0a" @click="concern(item.followTableId,item.id,i)">
						<uni-icons type="plusempty" size="12" color="red" ></uni-icons> 
						 关注
					</view>
				  </view>
			</view>
			
		</view>
	</view>
	
</template>

<script>
	import { mapState} from 'vuex'
export default {
	
	data() {
		return {
			baseUrl: '',
			associationList: [],
			associationNum: 0,
			// 请求参数对象
			queryObj: {
				
				// 页码值
				pageNo: 1,
				// 每页显示多少条数据
				pageSize: 10
			},
			
			associationState: false,
			// 是否正在请求数据
			isloading: false,
		};
	},
	computed: {
	  ...mapState('m_user', ['userId']),
	  //学校id
	  ...mapState('m_dept', ['deptId'])
	},
	onLoad(options) {
		this.baseUrl=uni.$http.baseUrl;
		this.getAssociationList();
		
	},
	methods: {
		async getAssociationList(){
			this.isloading = true
			await uni.request({
				
				url: this.baseUrl+'/api/association/getAssociationsByFollow', //仅为示例，并非真实接口地址。
				data: {
					// 社团Id
					deptId: this.deptId,
					userId: this.userId,
					// 页码值
					pageNo: this.queryObj.pageNo,
					// 每页显示多少条数据
					pageSize: this.queryObj.pageSize,
				},
				method: 'POST',
				header: {
					  // "Content-Type": "application/json",
					  "Content-Type": "application/x-www-form-urlencoded"
					},
				success: (res) => {
					// ** 关闭节流阀
					this.isloading = false
					
					this.associationList=[...this.associationList, ...res.data.data] 
					//请求得到的社团数量
					this.associationNum=res.data.data.length
					console.log(this.associationNum)
				},
				fail: (res) =>{
					if (res.statusCode !== 200) return uni.$showMsg()
				}
			});
		},
		concern(state,id,i){
			console.log(state)
			if(state==null){
				this.setAssociationState(state,id,i)
			 }else{
				this.cancleAssociationState(state,id,i)
			 }
		},
		
		//关注
		async setAssociationState(state,associationId,i){
			await uni.request({
				url: this.baseUrl+'/api/association/followAssociation', //仅为示例，并非真实接口地址。
				data: {
					// 社团Id
					associationId: associationId,
					// 关注人
					followId: this.userId,
				},
				method: 'POST',
				header: {
					"Content-Type": "application/json",
					  // "Content-Type": "application/x-www-form-urlencoded"
				},
				success: (res) => {
					this.associationList[i].followTableId=res.data.msg
				},
				fail: (res) =>{
					if (res.statusCode !== 200) return uni.$showMsg()
				}
			});
		},
		//取消关注
		async cancleAssociationState(state,id,i){
			console.log(this.associationList)
			await uni.request({
				url: this.baseUrl+'/api/association/cancelFollowAssociation', //仅为示例，并非真实接口地址。
				data: {
					// 社团Id
					id: state,
				},
				method: 'POST',
				header: {
					  // "Content-Type": "application/json",
					  "Content-Type": "application/x-www-form-urlencoded"
				},
				success: (res) => {
					 this.associationList[i].followTableId=null
				},
				
			});
		},
		gotoSearch() {
		  uni.navigateTo({
		    url: '/subpkg/search/search?deptId='+ this.deptId
		  })
		}
	},
	// 触底的事件
	onReachBottom() {
		// 判断是否还有下一页数据
		if (this.associationNum < this.queryObj.pageSize)
		return uni.$showMsg('数据加载完毕！')
		// 判断是否正在请求其它数据，如果是，则不发起额外的请求
		if (this.isloading) return
		 // 让页码值自增 +1
		 this.queryObj.pageNo += 1
		 // 重新获取列表数据
		 this.getAssociationList()
	},
	// 下拉刷新的事件
	onPullDownRefresh() {
		// 1. 重置关键数据
		this.queryObj.pageNo = 1
		this.isloading = false
		this.associationList = []
		// 2. 重新发起请求
		this.getAssociationList(() => uni.stopPullDownRefresh())
	}
}
</script>

<style lang="scss">
.assocition{
	background-color: white;
	display: flex;
	border-bottom: 1px solid #a5a5a5;
	.assocition-item{
		width: 79%;
		display: flex;
		height: 130px;
		align-items: center;
		.assocition-item-left{
			width: 30%;
			.assocition-image{
				margin-left: 10px;
				width: 80px; /* 宽度应该和高度相同 */
				height: 80px;
				border-radius: 50%; /* 圆形效果 */
			}
		}
		
		.assocition-item-right{
			padding-left: 20px;
			flex-direction: column;
			//align-items: flex-start;
			.association-name{
				font-size: 20px;
			}
			.association-introduce{
				padding-top: 12px;
				font-size: 16px;
				color: #a5a5a5;
				height: 45px;
				width: 200px; /* 定义容器宽度 */
				white-space: nowrap; /* 确保文本在一行内显示 */
				overflow: hidden; /* 超出容器部分隐藏 */
				text-overflow: ellipsis; /* 超出部分显示省略号 */
			}
			
		}
	}
	.association-state{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 5px;
		margin-bottom: 5px;
		// margin-right: 5px;
		
		.association-state-true,.association-state-false{
			padding-left: 5px;
			padding-right: 5px;
			margin-left: 5px;
			font-size: 16px;
			border-radius: 5px; /* 圆角 */
		}
		.association-state-false{
			border: 1px solid #ff7c0a;
			
		}
		.association-state-true{
			border: 1px solid #070707;
			
		}
	}
}
.ellipsis {
  width: 200px; /* 定义容器宽度 */
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 超出容器部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
.right-view{
	flex: 2;
	padding-top: 15px;
	background-color: #ffffff;
}
.search-box {
    position: sticky;
    top: 0;
    z-index: 999;
  }
</style>
